<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>position讲解</title>
  <style>
    /*
    position定位
    对于任意一个容器而言，他都存在left，right，top，bottom这些值的设定，这些值是用来定位，但是只能用来设定postion不等于static的容器
    默认情况，postion:static
    position有如下一些值：
      static:默认情况，不能设置
      relative:表示相对定位，他的位置会基于父类容器
      absolute:绝对定位，他的位置会基于上一级的非Static容器
      fixed:固定位置，完全基于浏览器，位置不变，哪怕有滚动条，它都不会改变
    */
    #parent {
      height:400px;
      width: 400px;
      margin:50px;
      border:1px solid red;
      position: relative;
    }
    #child {
      position: absolute;
      left:60px;
      top:30px;
      height:200px;
      width: 300px;
      border:1px solid green;
    }
    #test {
      width: 300px;
      height: 200px;
      position: fixed;
      left:50%;
    }
  </style>
</head>
<body>
  <div id="parent">
    <div id="child">
      测试文本!
    </div>
    <div id="test">
      测试容器
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div>
    底部
  </div>
</body>
</html>